<template>
  <div class="about-global">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">关于我们-全球分布</div>
    <div class="about-area">
      <div class="about-title">
        <span class="about-limit">PERGO品牌的足迹已经遍布全球</span>
        <countup :end-val="27" :duration="3" :start="true" class="about-num"></countup>
        <span>个国家和地区</span>
      </div>
      <div class="about-content">
        <p>包括英国、美国、意大利德、德国、法国、西班牙、俄罗斯、比利时、丹麦、挪威、冰岛、波兰、瑞士、芬兰、瑞典、印度，卢森堡，澳大利亚，新加坡，日本，韩国，马来西亚，柬埔寨，越南，中国，中国-台湾，中国-香港。</p>
        <p>Pergo在美国，是高品质强化地板的代名词，拥有独立的生产基地和工厂；</p>
        <p>澳大利亚，是Pergo销售额最好的市场之一，也是Pergo重要的产品物流中心。</p>
      </div>
    </div>
    <div class="ag-img"><img src="@/assets/img/about-g.png"></div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
  import { Countup } from 'vux'
  export default {
    components: {
      Countup
    },
    data() {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0
      }
    },
    methods: {
      getType(type) {
        this.type = type
      },
    },
  }
</script>

<style lang="less" scoped>
  .about-global {

    .about-area {
      background: url(../../assets/img/home.png) no-repeat;
      color: #cd873f;
      padding: 0.81rem 0.21rem;
    }

    .about-limit {
      display: inline-block;
      width: 2.8rem;
      text-align: right;
    }

    .about-num {
      font-size: 1rem;
      margin: 0 10px;
    }

    .about-content {
      border: 1px solid #cd873f;
      padding: 0.27rem 0.18rem 0;

      p {
        margin-bottom: 0.36rem;
      }
    }

    .about-title {
      color: #fff;
      background: #cd873f;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0;
    }

    .about-content p {
      text-align: justify;
    }

    .ag-img {
      margin-bottom: 0.36rem;

      img {
        display: block;
        width: 100%;
      }
    }
  }
</style>
